<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style type="text/css">
			.notice.mui-table-view .mui-media-object.mui-pull-left {
				max-width: 52px;
				height: 52px;
				font-size: 30px;
				line-height: 35px;
				margin: 0;
				margin-right: 25px;
				padding: 10px;
				color: #fff;
				border-radius: 50%;
			}
			
			.notice.mui-table-view .mui-media-object.personal {
				background-color: #c4affe;
				box-shadow: 0 0 5px #c4affe;
			}
			
			.notice.mui-table-view .mui-media-object.system {
				background-color: #7bc4f1;
				box-shadow: 0 0 5px #7bc4f1;
			}
			
			.notice.mui-table-view .mui-media-object.activity {
				background-color: #ffae5f;
				box-shadow: 0 0 5px #ffae5f;
			}
			
			.notice.mui-table-view .mui-table-view-cell a .mui-badge {
				display: none;
				background-color: #FEB406;
				color: #fff;
				position: relative;
				top: -28px;
				left: -12px;
			}
			
			.notice.mui-table-view .mui-table-view-cell h4 {
				font-size: 16px;
				font-weight: normal;
			}
			
			.notice.mui-table-view .mui-table-view-cell h4 span.new {
				color: #FEB406;
				font-size: 10px;
				border: 1px solid #FEB406;
				border-radius: 3px;
				margin-left: 5px;
				padding: 0 2px;
			}
			
			.notice.mui-table-view .mui-table-view-cell .time {
				font-size: 12px;
				color: #d5d5d5;
				float: right;
				position: relative;
				top: -24px;
			}
			
			.private-msg.mui-table-view {
				margin-top: 15px;
			}
			
			.private-msg.mui-table-view:before,
			.private-msg.mui-table-view:after {
				display: none;
			}
			
			.private-msg.mui-table-view li.mui-table-view-cell .mui-media-object {
				max-width: 50px;
				height: 50px;
				border-radius: 5px;
			}
			
			.private-msg.mui-table-view li.mui-table-view-cell span.mui-pull-right {
				font-size: 14px;
				color: #333333;
			}
			
			.private-msg.mui-table-view p.mui-ellipsis {
				margin: 4px 0;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<ul class="mui-table-view notice">
				<li class="mui-table-view-cell mui-media" id="system-messages">
					<a href="javascript:;">
						<i class="mui-media-object mui-pull-left iconfont system">
							&#xe6db;
						</i>
						<div class="mui-media-body">
							<h4 class="message-title">系统消息<span class="new">new</span></h4>
							<span class="time">
								19:32
							</span>
							<p class="info"></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" id="activity-messages">
					<a href="javascript:;">
						<i class="mui-media-object mui-pull-left iconfont activity">
							&#xe6b7;
						</i>
						<div class="mui-media-body">
							<h4 class="message-title">活动消息<span class="new">new</span></h4>
							<span class="time">
								11:03
							</span>
							<p class="info"></p>
						</div>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view private-msg" id="msg-list">
				<!--<li class="mui-table-view-cell mui-media" id="u1">
					<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
					<div class="mui-media-body">
						CBD
						<span class="mui-pull-right">2016-06-30 15:30</span>
						<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
					</div>
				</li>-->
			</ul>
			<a class="mui-btn btn-immer" id="addMore">点击加载更多</a>
		</div>

		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var msgList = document.getElementById("msg-list");
			var addMoreBtn = document.getElementById("addMore");
			var page = 1;
			mui.plusReady(function() {
				if(User.islogin()) {
					var myid = User.getMyID();
					var url = baseURL + 'message/getList/token/'+ myid +'/'+ page +'/5.json'
					console.log(url);
					msgList.style.display = 'block';
					getData(url);
				} else {
					addMoreBtn.style.display = 'none';
				}
			
				var lazyLoad = mui(msgList).imageLazyload({
					placeholder: '../images/holder1.png',
					autoDestroy: false
				});
				
				// 加载下一页
				mui('.mui-content').on('tap', '#addMore', function() {
					var url = baseURL + 'message/getList/token/'+ myid +'/'+ (++page) +'/5.json'
					console.log(url);
					getData(url);
				})
				
				function getData(url) {
					Common.ajax({
						url : url
					}, function(data) {
						console.log(JSON.stringify(data));
						if(data.code == 1) {
							var data = data.result;
							if(!data.length) {
								if(msgList.children.length) {
									mui.toast('已加载全部');
								} else {
									Common.showState(msgList, '&#xe69d;', '最近没有任何消息', 25);
								}
								addMoreBtn.style.display = 'none';
							} else {
								for(var i = 0; i < data.length; i++) {
									var headPic, details, thatId;
									if(data[i].acceptId == myid) { // 最后一句由对方发出
										headPic = Common.artistPic + data[i].releaseId + data[i].pic + '?' + Math.random(); // 始终显示对方头像
										thatId = data[i].releaseId; // 对方id
										details = data[i].sName + '： ' + data[i].details; // 消息格式->  对方昵称：内容
									} else { // 最后一句由我发出
										headPic = Common.artistPic + data[i].acceptId + data[i].pic + '?' + Math.random(); // 始终显示对方头像
										thatId = data[i].acceptId; // 对方id
										details = data[i].details; // 消息格式->  内容
									}
									createMsgList(data[i].sName, thatId, data[i].read, headPic, data[i].pic, data[i].releaseTime.substr(0, 16), details);
								}
								lazyLoad.refresh(true);
							}
						} else {
							mui.toast('加载失败，请稍后重试');
						}
					}, function(xhr) {
						mui.toast('网络异常，请稍后再试');
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				}
				
				/**
				 * @param {Object} name		对方昵称
				 * @param {Object} rid		对方用户id
				 * @param {Object} read		消息是否已读
				 * @param {Object} src		头像路径
				 * @param {Object} pic		头像后缀
				 * @param {Object} time		消息时间
				 * @param {Object} message	最后一条消息
				 */
				function createMsgList(name, id, read, src, pic, time, message) {
					var item = document.createElement('li');
					item.className = 'mui-table-view-cell mui-media';
					item.id = id;
					item.pic = pic;
					item.sName = name;
					var str = '<img class="mui-media-object mui-pull-left" data-lazyload="' + src + '">';
					str += '<div class="mui-media-body">' + name + '<span class="mui-pull-right">';
					str += time + '</span><p class="mui-ellipsis">' + message + '</p></div>';
					item.innerHTML = str;
					msgList.appendChild(item);
				}
				
				// 进入聊天页面
				mui(msgList).on('tap', '.mui-table-view-cell', function() {
					Common.openWindow('single-chat.html', {
						releaseId: this.id,
						pic: this.pic,
						sName: this.sName
					})
				})
				
				mui('.mui-table-view.notice').on('tap', '.mui-table-view-cell', function() {
					if(User.islogin() || this.id == "system-messages" || this.id == "activity-messages") {
						Common.openWindow(this.id + '.html');
					} else {
						Common.openWindow('login.html');
					}
				});
				
				document.addEventListener('reload', function() {
					plus.webview.currentWebview().reload();
				})
			})
		</script>
	</body>

</html>